<template name='audit'>
	<section class="page-container page-home page-static rc-audit">
		{{# header sectionName="Message_auditing" hideHelp=true}}{{/header}}
		<div class="rc-audit-container">
			<form class="rc-form--inline rc-audit-form">
			<div class="rc-input">
				<label class="rc-input__label">
					<div class="rc-input__title">{{_"Message"}}</div>
					<div class="rc-input__wrapper">
						<div class="rc-input__icon">
							{{> icon icon="magnifier"}}
						</div>
						<input name="msg" type="msg" class="rc-input__element" placeholder="{{_"Search_Messages"}}" autofocus="">
					</div>
				</label>
			</div>
			<label class="rc-select">
				<select id="type" class="rc-select__element js-type rc-input__wrapper" name="type">
					<option value="">{{_ 'Others'}}</option>
					<option value="d">{{_ 'Direct_Messages'}}</option>
					<option value="l">{{_ 'Omnichannel'}}</option>
				</select>
				{{> icon block="rc-select__arrow" icon="arrow-down" }}
			</label>

			{{> auditAutocomplete key='room' hide=nTypeOthers onChange=onChange prepare=prepareRoom field='name' term='name' icon='hashtag' label="room_name" placeholder='Channel_Name_Placeholder'}}
			{{> auditAutocompleteDirectMessage key='users' hide=nTypeDM onChange=onChange collection='UserAndRoom' modifier=modifierUser endpoint='users.autocomplete' field='username' icon='at' label="From" placeholder='Username_Placeholder'}}
			{{> auditAutocomplete key='visitor' hide=nTypeOmni onChange=onChange collection='CachedVisitorsList' modifier=modifierUser endpoint='livechat/visitors.autocomplete' field='custom_name' term='custom_name' icon='omnichannel' label="Visitor" templateItem="popupList_item_custom" placeholder='Visitor_Name_Placeholder'}}
			{{> auditAutocomplete key='agent' hide=nTypeOmni onChange=onChange collection='CachedAgentsList' conditions=agentConditions modifier=modifierUser endpoint='users.autocomplete' field='username' icon='omnichannel' label="Agent" placeholder='Agent_Name_Placeholder'}}

			<div class="rc-input rc-input--small rc-audit-date">
				<label class="rc-input__label">
					<div class="rc-input__title">{{_"Date_From"}}</div>
					<div class="rc-input__wrapper">
						<div class="rc-input__icon">
							{{> icon icon="lock"}}
						</div>
						<input name="startDate" type="date" class="rc-input__element">
					</div>
				</label>
			</div>
			<div class="rc-input rc-input--small rc-audit-date">
				<label class="rc-input__label">
					<div class="rc-input__title">{{_"Date_to"}}</div>
					<div class="rc-input__wrapper">
						<div class="rc-input__icon">
							{{> icon icon="lock"}}
						</div>
						<input name="endDate" type="date" class="rc-input__element">
					</div>
				</label>
			</div>
			<button type="button" class='rc-button rc-button--primary js-submit{{# if isLoading}} loading{{/if}}' name="button">{{_"Apply"}}</button>
		</form>
			{{#if isLoading}}
				{{> loading class="loading-animation--primary"}}
			{{else}}
				{{#if hasResults}}
					<ul aria-live="polite">
						{{#with messageContext}}
							{{#each msg in messages}}
								{{> nrr nrrargs 'message' shouldCollapseReplies=true msg=msg room=room subscription=subscription settings=settings u=u}}
							{{/each}}
						{{/with}}
					</ul>
				{{else}}
					{{> roomSearchEmpty class="rc-audit-empty"}}
				{{/if}}
			{{/if}}
		</div>
	</section>
</template>

<template name="auditAutocomplete">
	<div id="autocomplete-{{key}}" class="rc-input {{#if hide}} hidden{{/if}}">
		<label class="rc-input__label">
			<div class="rc-input__title">{{_ label}}</div>
			<div class="rc-input__wrapper">
				<div class="rc-input__icon">
					{{> icon block="rc-input__icon-svg" icon=icon}}
				</div>
				<div class="rc-tags">
					{{#let room=selected}}
						{{#if room}}
						{{> tag room}}
						{{/if}}
					{{/let}}
					<input type="text" class="rc-tags__input{{#if selected}} hidden{{/if}}" placeholder="{{_ placeholder}}"
					name="filter" autocomplete="off"/>
				</div>
			</div>
		</label>
		{{#with config}}
			{{#if autocomplete 'isShowing'}}
				{{#if autocomplete 'isLoaded'}}
					{{> popupList data=config items=items}}
				{{/if}}
			{{/if}}
		{{/with}}
	</div>
</template>

<template name="auditAutocompleteDirectMessage">
	<div id="autocomplete-{{key}}" class="rc-input {{#if hide}} hidden{{/if}}">
		<label class="rc-input__label">
			<div class="rc-input__title">{{_ label}}</div>
			<div class="rc-input__wrapper">
				<div class="rc-input__icon">
					{{> icon block="rc-input__icon-svg" icon=icon}}
				</div>
				<div class="rc-tags">
					{{#each user in selected}}
						{{> tag user}}
					{{/each}}
					<input type="text" class="rc-tags__input" placeholder="{{_ placeholder}}" name="filter" autocomplete="off"/>
				</div>
			</div>
		</label>
		{{#with config}}
			{{#if autocomplete 'isShowing'}}
				{{#if autocomplete 'isLoaded'}}
					{{> popupList data=config items=items}}
				{{/if}}
			{{/if}}
		{{/with}}
	</div>
</template>
